<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            display: flex;
        }

        .left {
            width: 20%;
            background-color: black;
            color: white;
            display: flex;
            flex-direction: column;
        }

        .top,
        .sec {
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
        }

        ul {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        li {
            flex: 1;
            text-align: center;
        }

        .right {
            flex: 1;
            background-color: aliceblue;
        }

        .tou {
            height: 50px;
            background-color: #eee;
        }

        .first {
            width: 50%;
            background-color: aqua;
            height: 60%;
            float: left;
        }

        .second {
            width: 50%;
            height: 60%;
            background-color: aquamarine;
            float: left;
        }
    </style>

<body>
    <div class="left">
        <div class="top">AdminLTE 3</div>
        <div class="sec">Alexander Pierce</div>
        <ul>
            <li>Dashboard VI
            </li>
            <li>Dashboard VI
            </li>
            <li>Dashboard VI
            </li>
            <li>Dashboard VI
            </li>
            <li>Dashboard VI
            </li>
            <li>Dashboard VI
            </li>
            <li>Dashboard VI
            </li>
            <li>Dashboard VI
            </li>
            <li>Dashboard VI
            </li>
            <li>Dashboard VI
            </li>
        </ul>
    </div>
    <div class="right">
        <div class="tou"></div>
        <p>Dashboard v3
        </p>
        <div class="first"></div>
        <div class="second"></div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./mockdatas.js"></script>
<script>
    var fir = document.querySelector('.first');
    var e = echarts.init(fir);
    e.setOption({
        title: {
            text: 'Online Store Visitors',
            left: 10,
            top: 5
        },
        legend: { //图例
            bottom: 3,
            right: 10,
        },
        tooltip: {
            trigger: 'axis'
        },
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        xAxis: {
            // type: 'category',
            left: 10,
            top: 5,
            boundaryGap: false,
            data: ['18h', '20h', '22h', '24h', '26h', '30h'],
        },
        yAxis: {
            name: 'Visitors Over Time',
            max: 200,
            min: 0,
            splitNumber: 10,
            // boundaryGap: [0.2, 0.2]
        },
        series: [
            {
                name: 'This Week',
                smooth: true,//平滑曲线
                type: 'line',
                symbol: 'circle',
                color: 'grey',
                data: [60, 80, 70, 65, 82, 79, 100],
            },
            {
                name: 'Last Week',
                type: 'line',
                symbol: 'circle',
                data: [100, 120, 170, 165, 180, 177, 160],
                smooth: true,
            }

        ]
    });

    var sec = document.querySelector('.second');
    var x = echarts.init(sec);

    x.setOption({
        title: {
            text: 'Sales'
        },
        legend: {
            bottom: 20,
            right: 10,
        },
        xAxis: {
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: [
            {
                name: 'Sales Over Time',//名字
                min: 0,
                max: 3,
                axisLabel: {
                    formatter: '${value}k'//写单位
                },
                //纵轴分组
                splitNumber: 3,
            }
        ],
        series: [

            {
                name: 'This year',
                type: 'bar',
                data: [1, 2, 3, 2.5, 2.7, 2.5, 3],
                color: 'blue',
                barWidth:25,
                itemStyle: {
                    normal: {
                        color: 'blue',
                        // barWidth: 20,
                    }
                }
            },
            {
                name: 'Last year',
                type: 'bar',
                data: [0.8, 1.7, 2.8, 2, 1.8, 1.5, 2],
                smooth: true,
                barWidth:25,
                itemStyle: {
                    normal: {
                        color: 'lightgray',
                    }
                }

            }
        ]
    });
</script>